import { Space } from 'antd';
import { useAuthStore } from '@/app/cg06/store/useAuthStore';
import SeawatLineChart from './SeawayLineChart';
import { useStatisticsData } from '../../hooks/useStatisticsData';
import { useInventoryDataMar } from '../../hooks/useInventoryDataMar';
import { useGlobeData } from '@/app/cg06/wearhouse/hooks/useGlobeData';
import Title from '../Title';

export function TrendChart(props: {
  title: string;
  unit?: string;
  subTitle?: string;
}) {
  const token = useAuthStore((s) => s.token);
  const { purchaseTendencyData, inventoryTendencyData, shipmentTendencyData } =
    useGlobeData();

  const dataMap: any = {
    近12个月采购金额累计趋势图: purchaseTendencyData,
    库存变化趋势图: inventoryTendencyData,
    出库变化趋势图: shipmentTendencyData,
  };

  const chartData = dataMap[props.title];

  const labels = chartData?.xAxis;

  const dataset = chartData?.seriesData.map((i: any, index: number) => {
    // { show: jIndex !== 5 && jIndex !== 8 }
    const data = props.title === '近12个月采购金额累计趋势图' ? i.data.map((j, jIndex) => ({value: j, label: {position: jIndex % 2 === 0 ? 'bottom' : 'top', distance: 8}})) : i.data
    return {
      data,
      // data: i.data.map((j, jIndex) => ({value: j, label: {position: jIndex % 2 === 0 ? 'bottom' : 'top', distance: 8}})),
      label: i.name,
      areaTopColor: i.areaTopColor,
      labelColor: i.labelColor,
      lineStyle: i.lineStyle,
    };
  });

  return (
    <Space
      style={{
        padding: '12px 2px 10px 24px',
        background: 'rgba(0,0,0,0.1)',
        borderRadius: 16,
        flex: 1,
        marginRight: '6px',
      }}
      direction="vertical"
      size={12}
    >
      <Title title={props.title} unit={props.unit} subTitle={props.subTitle} />
      <div
        style={{
          width: '400px',
          height: '316px',
          marginLeft: '-20px',
          marginTop: '-35px',
        }}
      >
        <SeawatLineChart
          labels={labels}
          dataset={dataset}
          title={props.title}
        />
      </div>
    </Space>
  );
}
